<template>
    <div class="common-layout">
        <el-row>
            <ToStockDetail v-if="stock" :stock="stock"></ToStockDetail>
            <el-button v-if="date">{{ date }}</el-button>
            <el-button v-if="type">{{ type }}</el-button>
        </el-row>

        <el-row>
            <el-table :data="state.data" height="700" 
            :cell-class-name="tableCellClassName"
            @sort-change="sortChange"
            @cell-click="industryClick"
            :default-sort="state.sort"
            style="width: 100%">
                <el-table-column type="index" />
                <el-table-column prop="date" label="date" sortable width="140">
                    <template #default="scope">
                        <DateOperationComponent :mdata="scope.row" />
                    </template>
                </el-table-column>
                <el-table-column prop="day" label="星期" width="80">
                    <template #default="scope">
                        {{ getDayOfWeek(scope.row.date) }}
                    </template> 
                </el-table-column>
                <el-table-column prop="toDisplay" label="toDisplay" width="100">
                    <template #default="scope">
                        <to-d-display :stock="stock" :date="scope.row.date"></to-d-display>
                    </template>
                </el-table-column>
                <el-table-column prop="close" label="价格" width="100"/>
                <el-table-column prop="pct" label="pct" sortable width="100"/>
                <el-table-column prop="pct3D" label="pct3D" sortable width="100"/>
                <el-table-column prop="pct5D" label="pct5D" sortable width="100"/>
                <el-table-column prop="lp" label="分位点" sortable width="100"/>
                <el-table-column prop="relLp" label="relLp" sortable width="100"/>
                <el-table-column prop="gt20d" label="gt20d" sortable width="100"/>
                <el-table-column prop="gt30d" label="gt30d" sortable width="100"/>
                <el-table-column prop="gt60d" label="gt60d" sortable width="100"/>
                <el-table-column prop="gt300d" label="gt300d" sortable width="100"/>
                <el-table-column prop="display" label="display" sortable width="100"/>
                <el-table-column prop="drawdown" label="drawdown" sortable width="100"/>
            </el-table>
        </el-row>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { getLpClassName,numberFormat ,getSessionStorage, setSessionStorage, getIndexName, getDayOfWeek } from '../utils/help';
import DateOperationComponent from './DateOperationComponent.vue';
import { getDailyDetailData } from '../service/daily';
import ToStockDetail from './ToStockDetail.vue';
import { useRouteQuery } from '../utils/useRoute';
import ToDDisplay from './element/ToDDisplay.vue';

const baseKey = "StockDailyMonitor"
const selectKey = baseKey + "Select"
const sortPropKey = "yearPctSortProp"
const sortOrderKey = "yearPctSortOrder"

const stock = ref("")
const date = ref("")
const type = ref("")

stock.value = useRouteQuery("stock","")
date.value = useRouteQuery("date","")
type.value = useRouteQuery("type","")

const state = reactive({
    rawData: [],
    data: [],
    options: [],
    sort: { 
        prop: getSessionStorage(sortPropKey) || '' , 
        order: getSessionStorage(sortOrderKey) || '' 
    }
})

const loadData = () => { 
    getDailyDetailData(stock.value).then( res => {
        state.rawData = res.data
        state.data = state.rawData.filter(item => {
            return item.date >= date.value
        })

        let basePrice = state.data[0].close
        state.data.forEach(item => {
            item.display = numberFormat((item.close - basePrice) / basePrice * 100, 2)
        })
        state.data = state.data.slice(0, 350) // 最多留 300 个数据
    })
}

loadData()

const sortChange = (column, prop, order) => {
    setSessionStorage(sortPropKey, column.prop)
    setSessionStorage(sortOrderKey, column.order)
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    let columnProperty = column.property
    let val = row[columnProperty]

    if (columnProperty === 'lp') {
        return getLpClassName(val)
    }

    if (["gt20d","gt30d","gt60d","gt100d","gt300d"].includes(columnProperty)) {
        if (val < 0) {
            return 'wugu-lt10-cell'
        } else {
            return 'wugu-lt100-cell'
        }
    }

    if (["pct","display","pct3D","pct5D"].includes(columnProperty)) {
        if (val < 0) {
            return 'lt0-cell'
        }
    }

    return ''
}
</script>

<style>
</style>